<template>
    <div class="yuan-container checkBasis-index">
        <a-card title="执行标准">
            <a-tabs type="card" :default-active-key="0" @change="changeTab">
                <a-tab-pane v-for="(item,i) in tabsData" :key="item.rawType" :tab="item.name">
                    <div class="filter-panel">
                        <a-input-search class="filter-list" allowClear style="width: 200px;color: #05b089" v-model="keywords"
                            placeholder="关键字" @search="resetList" />
                        <div class="filter-list" style="float: right;" v-if="$utilCheckPermission(['detectionPrincipleAdd'])">
                            <a-button type="primary" @click="add">新增</a-button>
                        </div>
                    </div>
                    <div class="table">
                        <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="tableOption.columns"
                            :data-source="pageList" :pagination="pagination"></a-table>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <Add :rawType="rawType" :visible="addVisible" @closeModal="() => addVisible = false" :infoId="infoId" @resetList="getList" />
        <PreviewImageVue :imgList="imageUrls" @close="previewVisible=false" :previewVisible="previewVisible" />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { DetectionListRes } from "@/api/nextApi";
import Add from "./components/Add.vue";
import PreviewImageVue from "@/components/previewImage.vue";
import config from "@/utils/config";
@Component({
    name: "checkBasisIndex",
    components: { Add, PreviewImageVue },
})
export default class extends Vue {
    previewVisible = false;
    addVisible = false;
    infoId = "";
    imageUrls: string[] = [];
    tableOption = {
        columns: [
            {
                align: "center",
                dataIndex: "executeStandard",
                key: "executeStandard",
                title: "标准名称",
            },
            {
                align: "center",
                dataIndex: "createTime",
                key: "createTime",
                title: "添加时间",
            },
            {
                align: "center",
                dataIndex: "varietyName",
                key: "varietyName",
                title: "物料名称",
            },
            {
                align: "center",
                dataIndex: "checkoutStandardFile",
                key: "checkoutStandardFile",
                title: "附件",
                customRender: (text: string, record: DetectionListRes, index: number) => {
                    if (record.checkoutStandardFile) {
                        return h(
                            "a-button",
                            {
                                props: { type: "primary", size: "small" },
                                on: { click: () => this.showStandardImg(record) },
                            },
                            "查看"
                        );
                    } else {
                        return "--";
                    }
                },
            },
            {
                align: "center",
                dataIndex: "state",
                key: "state",
                title: "状态",
                customRender: (text: string, record: DetectionListRes, index: number) => {
                    const stateBox = h(
                        "div",
                        { class: record.state === 0 ? "c-success" : "c-danger" },
                        record.state === 0 ? "启用" : "禁用"
                    );
                    return stateBox;
                },
            },
            {
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                width: 260,
                customRender: (text: string, record: DetectionListRes, index: number) => {
                    const statusDom = h(
                        "a-popconfirm",
                        {
                            props: {
                                title: record.state === 0 ? "确定要禁用吗？" : "确定要启用吗？",
                                okText: "确定",
                                cancelText: "取消",
                            },
                            on: { confirm: () => this.clickDisable(record) },
                        },
                        [
                            h(
                                "a-button",
                                {
                                    style: { marginRight: "5px" },
                                    props: { icon: "tool", type: record.state === 0 ? "danger" : "primary", size: "small" },
                                },
                                record.state === 0 ? "禁用" : "启用"
                            ),
                        ]
                    );
                    const editBtn = h(
                        "a-button",
                        {
                            style: { marginRight: "5px" },
                            props: { icon: "edit", type: "primary", size: "small" },
                            on: { click: () => this.editDetail(record) },
                        },
                        "编辑"
                    );
                    const deleteBtn = h(
                        "a-popconfirm",
                        {
                            props: { title: "确定要删除吗？", okText: "确定", cancelText: "取消" },
                            on: { confirm: () => this.remove(record) },
                        },
                        [h("a-button", { props: { icon: "delete", type: "danger", size: "small" } }, "删除")]
                    );

                    const btn: any[] = [];
                    if (this.$utilCheckPermission(["detectionPrincipleCompile"])) btn.push(editBtn);
                    if (this.$utilCheckPermission(["detectionPrincipleForbidden"])) btn.push(statusDom);
                    if (this.$utilCheckPermission(["detectionPrincipleRemove"])) btn.push(deleteBtn);
                    return h("div", btn);
                },
            },
        ],
    };
    keywords = "";
    pageList: DetectionListRes[] = [];
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    //tabs数据
    tabsData = config.tabsData;
    rawType:string = "";
    mounted() {
        this.rawType = this.tabsData[0].rawType;
        this.getList();
    }
    async changeTab(key) {
        this.rawType = key
        this.resetList();
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getDetectionList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                varietyName: this.keywords,
                rawType: this.rawType,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    add() {
        this.infoId = "";
        this.addVisible = true;
    }
    editDetail(item: DetectionListRes) {
        this.infoId = item.id;
        this.addVisible = true;
    }
    async remove(item: DetectionListRes) {
        try {
            this.loading = true;
            const res = await nextApi.deleteDetection(item.id);
            this.$message.success(res.msg);
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickDisable(item: DetectionListRes) {
        try {
            this.loading = true;
            await nextApi.editDetection({
                id: item.id,
                state: item.state === 1 ? 0 : 1,
            });
        } finally {
            this.loading = false;
        }
        this.getList();
    }
    showStandardImg(item: DetectionListRes) {
        this.imageUrls = item.checkoutStandardFile.split(";");
        this.previewVisible = true;
    }
}
</script>
<style lang="scss">
.checkBasis-index {
    padding: 20px;
}
</style>
